<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            color: red;
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="box a b">222</div>


    <script>


        // className  本身得到的是字符串  
        //     添加的时候可以拼接  ' a'  空格
        //     删除不是很方便


        // classList 伪数组
        //    add()  添加
        //    remove()  删除
        //    replace(原来的，新的)  替换
        //    contains()  包含  返回布尔值






        var oDiv = document.querySelector('div');

        // oDiv.onclick = function () {
        //     // 移除a
        //     // oDiv.className = 'div';

        //     oDiv.className += ' a';
        // }



        console.log(oDiv.className);   // box a b

        console.log(oDiv.classList);   // 伪数组

        // classList 伪数组
        //    add()  添加
        //    remove()  删除
        //    replace(原来的，新的)  替换
        //    contains()  包含  返回布尔值


        oDiv.classList.add('c');

        oDiv.classList.remove('a');

        // 参数不能是空
        oDiv.classList.replace('box', 'bb');

        console.log(oDiv.classList.contains('c'));


    </script>

</body>

</html>